<!-- 积分余额 -->
<template>
	<view class="page_box">
		<view class="head_box">
			<shopro-navbar :background="{ background: 'none' }" :backText="wallet_type_name +'明细'"
				backIconColor="#333"></shopro-navbar>
			<view class="all-box u-flex-col u-row-center u-col-center">
				<text class="all-num">{{ userInfo[wallet_type] || 0 }}</text>
				<text class="all-title u-m-b-30">当前{{wallet_type_name}}</text>
				<button class="login-btn-start" @tap="showModal = true" v-if="wallet_type=='djq_money'">转赠</button>
				<image class="score-card-bg" :src="$IMG_URL + '/imgs/score/score_wallet_bg.png'" mode=""></image>
			</view>
			<view class="tab-box u-flex">
				<view class="tab-item u-flex u-row-center " @tap="onTab('all')">
					<view class="tab-name" :class="{ 'tab-active': tabCur === 'all' }">全部</view>
				</view>
				<view class="tab-item u-flex u-row-center" @tap="onTab('add')">
					<view class="tab-name" :class="{ 'tab-active': tabCur === 'add' }">收入</view>
				</view>
				<view class="tab-item u-flex u-row-center" @tap="onTab('reduce')">
					<view class="tab-name" :class="{ 'tab-active': tabCur === 'reduce' }">支出</view>
				</view>
			</view>
		</view>
		<view class="content_box">
			<scroll-view scroll-y="true" @scrolltolower="loadMore" class="scroll-box">
				<view class="item-box u-flex u-row-between" v-for="log in scoreLog" :key="log.id">
					<view class="u-flex-col">
						<view class="name">{{ log.memo }}</view>
						<view class="time">{{ $u.timeFormat(log.createtime) }}</view>
					</view>
					<view class="num font-OPPOSANS" v-if="log.wallet >= 0">{{ log.wallet }}</view>
					<view class="num font-OPPOSANS" v-else>{{ log.wallet }}</view>
				</view>
				<!-- 空置页 -->
				<shopro-empty v-if="isEmpty" marginTop="200rpx" :image="$IMG_URL + '/imgs/empty/comment_empty.png'"
					tipText="暂无数据~"></shopro-empty>
				<!-- 更多 -->
				<u-loadmore v-if="scoreLog.length" height="80rpx" :status="loadStatus" icon-type="flower"
					color="#ccc" />
			</scroll-view>
		</view>
		<!-- 转余额弹框 -->
		<view class="cu-modal bottom-modal" :class="{ show: showModal }" @tap="closeModal" style="z-index: 10080;">
			<view class="login-wrap cu-dialog form-wrap  safe-area-inset-bottom" @tap.stop
				style="border-radius: 20rpx 20rpx 0 0;">
				<view class="head-box u-m-b-40">
					<view class="head-title u-m-b-20">赠送代金券</view>
					<view class="item-content u-flex u-col-center u-row-between">
						<view class="item-title">个人手机号</view>
						<view class="item-title">{{userInfo.mobile?userInfo.mobile:'未绑定'}}</view>
					</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">手机号验证码</view>
						<u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'code')"
							@input="checkValue($event, 'code')" placeholder="请输入手机号验证码"
							:placeholderStyle="placeholderStyle" v-model="form['give'].data.code"
							type="number"></u-input>
						<button class=" code-btn code-btn-start" @tap="getSmsCode('give')">
							{{ codeText }}
						</button>
					</view>
					<view class="message-error">{{ form["give"].error.code || "" }}</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">赠送的手机号</view>
						<u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'zj_mobile')"
							@input="checkValue($event, 'zj_mobile')" placeholder="请输入赠送的手机号"
							:placeholderStyle="placeholderStyle" v-model="form['give'].data.zj_mobile"></u-input>
					</view>
					<view class="message-error">{{ form["give"].error.zj_mobile || "" }}</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">赠送的余额</view>
						<u-input class="u-m-r-10 u-flex-1" placeholder="请输入赠送的余额" :placeholderStyle="placeholderStyle"
							v-model="form['give'].data.zz_money" type="number"></u-input>
						<button class=" login-btn-start" @tap="giveSubmit">确认</button>
					</view>
					<view class="message-error">{{ form["give"].error.zz_money || "" }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import schema from "@/uview-ui/libs/util/async-validator";
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import FormValidate from "@/shopro/validate/form";
	export default {
		components: {},
		data() {
			return {
				isEmpty: false,
				showModal: false,
				tabCur: 'all',
				wallet_type: '',
				wallet_type_name: '',
				scoreLog: [],
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1,
				codeText: "获取验证码",
				form: {
					give: {
						data: {
							mobile: "", // 手机号
							code: "", // 验证码
							zz_money: "", //转赠金额
							zj_mobile: "", // 密码
						},
						rules: {
							code: FormValidate.code,
							mobile: FormValidate.mobile,
							zj_mobile: FormValidate.mobile,

						},
						error: {
							mobile: "", // 手机号
							code: "", // 验证码
							zj_mobile: "", // 密码
						}
					},
				},
				codeText: "获取验证码",
				disabledCode: false,
			};
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		onLoad(options) {
			this.form.give.data.mobile = this.userInfo.mobile
			if (options && options.type) {
				this.wallet_type = options.type
				if (this.wallet_type == 'money') {
					this.wallet_type_name = "积分"
				} else if (this.wallet_type == 'gwq_money') {
					this.wallet_type_name = "购物券"
				} else if (this.wallet_type == 'djq_money') {
					this.wallet_type_name = "代金券"
				} else if (this.wallet_type == 'sf_money') {
					this.wallet_type_name = "解冻红包"
				}
				this.getScoreLog();
			}
		},
		methods: {
			//关闭弹窗
			closeModal() {
				this.showModal = false
				this.form.give.data = {
					mobile: "", // 手机号
					code: "", // 验证码
					zz_money: "", //转赠金额
					zj_mobile: "", // 密码
				}
			},
			// 获取短信验证码
			getSmsCode(type) {
				const that = this;
				if (!that.disabledCode) {
					that.$http(
						"common.smsSend", {
							mobile: that.form['give'].data.mobile,
							event: 'zz'
						},
						"获取验证码中..."
					).then(res => {
						if (res.code === 1) {
							that.codeChange();
							that.$u.toast("验证码已发送，请注意查收短信");
						} else {
							that.$u.toast(res.msg);
						}
					});
				} else {
					that.$u.toast("请稍后再试");
				}
			},
			// 倒计时
			codeChange() {
				if (this.disabledCode) return;
				this.disabledCode = true;
				let n = 60;
				this.codeText = n + "s";
				const run = setInterval(() => {
					n -= 1;
					if (n < 0) {
						clearInterval(run);
					}
					this.codeText = n + "s";
					if (this.codeText < 0 + "s") {
						this.disabledCode = false;
						this.codeText = "重新获取";
					}
				}, 1000);
			},
			// 检测
			checkValue(e, key) {
				this.validation(key);
			},
			// 校验数据
			validation(key, callback = () => {}) {
				let that = this;
				//拿到需要校验的数据
				let fieldValue = this.form['give'].data[key];
				//拿到需要检验的规则
				let rules = this.form['give'].rules[key];
				// 判空
				if (!rules || rules.length === 0) {
					return callback("");
				}
				// 设置当前的装填，标识为校验中
				let validateState = "validating";
				// 调用async-validator的方法
				let validator = new schema({
					[key]: rules
				});
				// 校验
				validator.validate({
						[key]: fieldValue
					}, {
						firstFields: true
					},
					(errors, fields) => {
						// 记录状态和报错信息
						validateState = !errors ? "success" : "error";
						let validateMessage = errors ? errors[0].message : "";
						that.form['give'].error[key] = validateMessage;
						callback(validateMessage);
					}
				);
			},
			validateAll(callback) {
				let that = this;
				return new Promise(resolve => {
					// 对当前所有表单检验
					let valid = true; // 默认通过
					let count = 0; // 用于标记是否检查完毕
					let errorArr = []; // 存放错误信息
					let curFormData = that.form['give'].data;
					console.log(curFormData)
					Object.keys(curFormData).map(field => {
						that.validation(field, error => {
							// 如果回调有error
							if (error) {
								valid = false;
								errorArr.push(error);
							}
							if (++count === Object.keys(curFormData).length) {
								resolve(valid);
								if (errorArr.length) {
									this.$u.toast(errorArr[0]);
								}
								if (typeof callback == "function") callback(valid);
							}
						});
					});
				});
			},
			// 转赠
			async giveSubmit() {
				let that = this;
				(await that.validateAll()) && that.$http(
						"user.zz_money", {
							mobile: that.form['give'].data.mobile,
							zj_mobile: that.form["give"].data.zj_mobile,
							code: that.form["give"].data.code,
							zz_money: that.form["give"].data.zz_money
						},
						"转赠中..."
					)
					.then(res => {
						if (res.code === 1) {
							that.$u.toast(res.msg);
							that.closeModal();
							that.scoreLog = [];
							that.currentPage = 1;
							that.getScoreLog();
							that.$store.dispatch('getUserInfo');
						}
					});
			},
			loadMore() {
				if (this.currentPage < this.lastPage) {
					this.currentPage += 1;
					this.getScoreLog();
				}
			},
			onTab(type) {
				if (this.tabCur !== type) {
					this.tabCur = type;
					this.scoreLog = [];
					this.currentPage = 1;
					this.getScoreLog();
				}
			},
			// 积分明细
			getScoreLog(type) {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('money.walletLog', {
					wallet_type: that.wallet_type,
					status: that.tabCur,
					page: that.currentPage
				}).then(res => {
					if (res.code === 1) {
						that.scoreLog = [...that.scoreLog, ...res.data.wallet_logs.data];
						that.lastPage = res.data.wallet_logs.last_page;
						that.isEmpty = !that.scoreLog.length;
						that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.page_box {
		background: #fff;

		.head_box {
			width: 750rpx;
			height: 480rpx;
			background: linear-gradient(180deg, rgba(239, 196, 128, 1) 0%, rgba(248, 220, 165, 1) 40%, rgba(255, 255, 255, 1) 100%) no-repeat;
			position: relative;

			.all-box {
				height: 360rpx;
				padding-bottom: var(--status-bar-height);

				.all-num {
					font-size: 50rpx;
					font-weight: 500;
					color: #a8700d;
					margin-bottom: 20rpx;
				}

				.all-title {
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(168, 112, 13, 1);
				}

				.score-card-bg {
					width: 100%;
					height: 90rpx;
				}
			}

			.tab-box {
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 710rpx;
				height: 90rpx;
				background: rgba(255, 255, 255, 1);
				border-radius: 30rpx 30rpx 0px 0px;
				border-bottom: 1rpx solid #dfdfdf;
				padding: 0 30rpx;

				.tab-item {
					flex: 1;

					.tab-name {
						display: inline-block;
						font-size: 30rpx;
						font-family: Noto Sans S Chinese;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						border-bottom: 4rpx solid transparent;
						line-height: 86rpx;
					}

					.tab-active {
						border-bottom: 4rpx solid rgba(213, 166, 90, 1);
					}
				}
			}
		}
	}

	.item-box {
		background: #fff;
		min-height: 150rpx;
		border-bottom: 1rpx solid #dfdfdf;
		padding: 30rpx;

		.name {
			font-size: 28rpx;

			font-weight: 500;
			color: rgba(102, 102, 102, 1);
			line-height: 28rpx;
			margin-bottom: 20rpx;
		}

		.time {
			font-size: 24rpx;

			font-weight: 500;
			color: rgba(196, 196, 196, 1);
			line-height: 24px;
		}

		.num {
			font-size: 30rpx;

			font-weight: 500;
			color: #e6b873;
		}
	}

	.login-btn-start {
		width: 158rpx;
		line-height: 56rpx;
		background: linear-gradient(90deg, #e9b461, #eecc89);
		border-radius: 28rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #ffffff;
	}


	.login-wrap {
		padding: 50rpx 34rpx;
		min-height: 650rpx;
		background-color: #fff;

		.head-box {
			.head-title {
				min-width: 160rpx;
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
				line-height: 36rpx;
			}
			.item-title{
				font-weight: bold;
				color: #333333;
				line-height: 28rpx;
				font-size: 28rpx;
			}
			.head-title-active {
				width: 160rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #999;
				line-height: 36rpx;
			}

			.head-title-animation {
				animation-name: title-animation;
				animation-duration: 0.1s;
				animation-timing-function: ease-out;
				animation-fill-mode: forwards;
			}

			.head-title-line {
				position: relative;

				&::before {
					content: "";
					width: 1rpx;
					height: 34rpx;
					background-color: #e4e7ed;
					position: absolute;
					left: -30rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			.head-subtitle {
				font-size: 26rpx;
				font-weight: 400;
				color: #c2c7cf;
				text-align: left;
				display: flex;
			}
		}

		.code-btn[disabled] {
			background-color: #fff;
		}

		.code-btn-start {
			width: 200rpx;
			line-height: 56rpx;
			border: 1rpx solid #e9b766;
			border-radius: 28rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #e9b766;
			opacity: 0.5;
		}

	}

	.form-wrap {
		.form-item {
			display: flex;
			flex-direction: column;
			font-size: 28rpx;
			padding: 20rpx 0;
			color: $u-main-color;
			box-sizing: border-box;
			line-height: $u-form-item-height;
			width: 100%;

			.item-title {
				width: 200rpx;
				font-size: 30rpx;
				color: #333;
				font-weight: 600;
				text-align: left;
			}

			.message-error {
				text-align: left;
				font-size: 24rpx;
				line-height: 24rpx;
				color: $u-type-error;
				margin-top: 12rpx;
				margin-left: 200rpx;
			}
		}
	}
</style>